<template>
	<div class="login-register">
		<div class="contain">
			<div class="big-box" :class="{ active: isLogin }">
				<div class="big-contain" v-if="isLogin">

					<div class="btitle">账户登录</div>

					<!-- <div class="bform">
						<el-form>
							<el-form-item label="账号" prop="pass">
								<el-input type="username" v-model="form.username"></el-input>
								<span class="errTips" v-if="usernameError">* 账号填写错误 *</span>
							</el-form-item>
							<el-form-item label="密码" prop="pass">
								<el-input type="password" v-model="form.password"></el-input>
								<span class="errTips" v-if="passwordError">* 密码填写错误 *</span>
							</el-form-item>
							<el-form-item label="部门" prop="pass">
								<el-select v-model="form.type" placeholder="请选择">
									<el-option v-for="item in options" :key="item.roleKey" :label="item.roleName"
										:value="item.roleKey">
									</el-option>
								</el-select>
							</el-form-item>
						</el-form>
					</div> -->
					<div class="bform">
						<input type="userAccount" placeholder="账号" v-model="form.userAccount">
						<span class="errTips" v-if="userAccountError">* 账号填写错误 *</span>
						<input type="password" placeholder="密码" v-model="form.password">
						<span class="errTips" v-if="passwordError">* 密码填写错误 *</span>
						<select v-model="form.type" placeholder="部门" style="width: 300px;">
							<option v-for="item in options" :key="item.roleKey" :label="item.roleName"
								:value="item.roleKey"></option>
						</select>
						<span class="errTips" v-if="typeError">* 部门填写错误 *</span>

					</div>

					<button class="bbutton" @click="login">登录</button>
					<div class="otherlogin">
						<el-form>
							<el-form-item class="otherBtn">
								<el-button type="primary" plain disabled style="width: 100px; font-size: 12px">其他方式登录
								</el-button>
								<el-button type="primary" circle>
									<a-icon type="qq" />
								</el-button>
								<el-button type="info" circle>
									<a-icon type="wechat" />
								</el-button>
								<el-button type="success" circle>
									<a-icon type="github" />
								</el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
				<div class="big-contain" v-else>
					<div class="btitle">创建个人账户</div>
					<div class="bform">
						<input type="text" placeholder="用户名" v-model="form.userAccount" />
						<span class="errTips" v-if="existed">* 用户名已经存在！ *</span>
						<span class="errTips" v-if="registerAccounter">* 用户名不能为空！ *</span>
						<input type="password" placeholder="密码" v-model="form.password" />
						<select v-model="form.type" placeholder="部门" style="width: 300px;">
							<option v-for="item in options" :key="item.roleKey" :label="item.roleName"
								:value="item.roleKey"></option>
						</select>
						<span class="errTips" v-if="registerTypeError">* 你不能注册该类型账户 *</span>
					</div>
					<button class="bbutton" @click="register">注册</button>
				</div>
			</div>
			<div class="small-box" :class="{ active: isLogin }">
				<div class="small-contain" v-if="isLogin">
					<div class="stitle">你好，朋友!</div>
					<p class="scontent">开始注册，和我们一起旅行</p>
					<button class="sbutton" @click="changeType">注册</button>
				</div>
				<div class="small-contain" v-else>
					<div class="stitle">欢迎回来!</div>
					<p class="scontent">与我们保持联系，请登录你的账户</p>
					<button class="sbutton" @click="changeType">登录</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios';
	import form from '../../components/index/loginForm.vue';
	export default {
		name: "login-register",
		data() {
			return {
				isLogin: false,
				userAccountError: false,
				passwordError: false,
				typeError:false,
				existed: false,
				registerAccounter:false,
				registerTypeError:false,
				form: {
					userAccount: "",
					password: "",
					type: ""
				},
				options: [{
					roleKey: '选项1',
					roleName: '黄金糕'
				}],
			};
		},
		mounted() {
			this.roles();
		},
		methods: {
			changeType: function() {
				this.isLogin = !this.isLogin;
				this.form.userAccount = "";
				this.form.password = "";
				this.form.type = "";
			},
			roles: function() {
				axios.get("http://localhost:9003/role/list").then((response) => {
					console.log(response.data);
					this.options = response.data;
				})
			},
			login: function() {
				console.log(this.form.userAccount)
				this.userAccountError=false;
				this.typeError=false;
				this.passwordError=false;
					axios.post('http://localhost:9003/users/login', {
							userAccount: this.form.userAccount,
							password: this.form.password,
							type:parseInt(this.form.type) 
						},)
						.then(response => {
							console.log(response.data)
							console.log(response.data.message)
							/* window.sessionStorage.setItem("token",response.data.data.data.token);
							console.log(window.sessionStorage.token) */
							localStorage.setItem("token",response.data.data.data.token); 
							console.log(localStorage.token)
							if(response.data.message == "账户错误，请重新输入"){
								this.userAccountError =true;
							}else if(response.data.message == "账户类型错误，请重新输入"){
								this.typeError = true;
							}else if(response.data.message == "密码错误，请重新输入"){
								this.passwordError=true;
							}else{
								if(response.data.code=200){
							this.$message.success("登陆成功");
							//将登陆以后的token保存到客户端的sessionStorage中
							//token只应在当前网站打开期间生效，所以将token保存在sessionStorage中
							window.sessionStorage.setItem("token",response.data.token);
							//通过编程式导航跳转到下一个页面
							console.log(this.form.type)
							if(this.form.type=="1"  ){
								this.$router.push("/indexTlogin");
							}else if(this.form.type=="2"){
								this.$router.push("/indexLogin");
							}else if(this.form.type=="3"){
								this.$router.push("/zjLogin");
							}else if(this.form.type=="4"){
								this.$router.push("/alllogin");
							}
							//this.$router.push("/indexLogin");
								}
							}
							
							/* switch(response.data.message){
								case "账户错误，请重新输入":
									this.userAccountError =true;
									break;
								case "账户类型错误，请重新输入":
									this.typeError = true;
									break;
								case "密码错误，请重新输入":
									this.passwordError=true;
									break;
								case "用户登录成功！":
									alert("登陆成功");
									break;
									
							} */
						})
						.catch(error => {
							console.log(error);
						})
				
			},
			register() {
				const self = this;
				this.registerAccounter=false;
				this.existed=false;
				this.registerTypeError=false;
				if (
					self.form.userAccount != "" &&
					self.form.password != "" &&
					self.form.type != ""
				) {
					axios({
							method: 'post',
							url: 'http://localhost:9003/users/register',
							data: {
								userAccount: self.form.userAccount,
								password: self.form.password,
								type: parseInt(this.form.type),
								
							}
						})
						.then(response => {
							console.log(response.data)
							console.log(response.data.message)
							switch(response.data.message){
								case "传入的账户/密码为空，或账户类型不是个人/企业用户/公司用户":
									this.registerAccounter =true;
									break;
								case "用户ID已存在，请重新输入！":
									this.existed = true;
									break;
								case "你不能注册该类型账户！":
									this.registerTypeError=true;
									break;
								case "用户注册成功！":
									alert("注册成功");
									break;
								case "用户注册失败!":
									alert("用户注册失败");
									break;
									
							}
						})
						.catch(err => {
							console.log(err);
						})
				} else {
					alert("填写不能为空！");
				}
			},

		},
	};
</script>

<style scoped="scoped">
	.login-register {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		background-image: url(https://img.zcool.cn/community/01ff655562b7ca0000009c50030516.jpg@2o.jpg);
	}

	.contain {
		width: 60%;
		height: 60%;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		border-radius: 20px;
		box-shadow: 0 0 3px #f0f0f0, 0 0 6px #f0f0f0;
	}

	.big-box {
		width: 70%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 30%;
		transform: translateX(0%);
		transition: all 1s;
	}

	.big-contain {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.btitle {
		font-size: 1.5em;
		font-weight: bold;
		position: absolute;
		top: 50px;
		color: rgb(57, 167, 176);
	}

	.bform {
		width: 100%;
		height: 40%;
		padding: 2em 0;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}

	.bform .errTips {
		display: block;
		width: 50%;
		text-align: left;
		color: red;
		font-size: 0.7em;
		margin-left: 1em;
	}

	.bform input {
		width: 50%;
		height: 30px;
		border: none;
		outline: none;
		border-radius: 10px;
		padding-left: 2em;
		background-color: #f0f0f0;
	}

	.bbutton {
		width: 20%;
		height: 40px;
		border-radius: 24px;
		border: none;
		outline: none;
		background-color: rgb(57, 167, 176);
		color: #fff;
		font-size: 0.9em;
		cursor: pointer;
	}

	.small-box {
		width: 30%;
		height: 100%;
		background: linear-gradient(135deg, rgb(57, 167, 176), rgb(56, 183, 145));
		position: absolute;
		top: 0;
		left: 0;
		transform: translateX(0%);
		transition: all 1s;
		border-top-left-radius: inherit;
		border-bottom-left-radius: inherit;
	}

	.small-contain {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.stitle {
		font-size: 1.5em;
		font-weight: bold;
		color: #fff;
	}

	.scontent {
		font-size: 0.8em;
		color: #fff;
		text-align: center;
		padding: 2em 4em;
		line-height: 1.7em;
	}

	.sbutton {
		width: 60%;
		height: 40px;
		border-radius: 24px;
		border: 1px solid #fff;
		outline: none;
		background-color: transparent;
		color: #fff;
		font-size: 0.9em;
		cursor: pointer;
	}

	.big-box.active {
		left: 0;
		transition: all 0.5s;
	}

	.small-box.active {
		left: 100%;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-top-right-radius: inherit;
		border-bottom-right-radius: inherit;
		transform: translateX(-100%);
		transition: all 1s;
	}

	.otherlogin {
		position: absolute;
		top: 374px;
	}
</style>
